<template>
  <view class="UserInfo">
    <view class="bg">
      <image class="avatarBg" :src="userDetail.avatar"></image>
    </view>
    <!-- 头像 + 关注 -->
    <view class="infoDetail">
      <view class="head">
        <view class="avatarBox">
          <image :src="userDetail.avatar" class="avatar"></image>
        </view>
        <view class="focusBtn" v-if="isMe">
          <van-button
            :color="isFocus ? '#aaa' : '#05A47D'"
            :disabled="btnLoading"
            size="small"
            @click="handleFocusUser"
            >{{ focusContent[isFocus] }}</van-button
          >
        </view>
      </view>

      <!-- 用户信息 -->
      <view class="otherInfo">
        <view class="nickName">{{ userDetail.nickName }}</view>
        <view
          class="introduce"
          style="color: #999; font-size: 28rpx; margin-top: 10rpx"
          >{{ userDetail.introduce }}</view
        >
        <view class="tags" style="margin-top: 10rpx">
          <van-tag
            v-for="(item, index) in userDetail.tags"
            :key="index"
            size="medium"
            style="margin-right: 10rpx"
            >{{ item }}</van-tag
          >
        </view>
        <view class="infoOptions">
          <view
            class="optionItem"
            v-for="(item, index) in optionsList"
            :key="index"
          >
            <view
              >{{ item.name }}
              <text class="countStyle">{{ item.count }}</text></view
            >
          </view>
        </view>
      </view>
    </view>

    <!-- 讨论和队伍信息列表 -->
    <view class="dicussionAndTeam">
      <view class="changeTab">
        <view
          :class="['tabItem', !tabFlag ? 'tabActive' : '']"
          @click="tabFlag = 0"
          >讨论</view
        >
        <view
          :class="['tabItem', tabFlag ? 'tabActive' : '']"
          @click="tabFlag = 1"
          >队伍</view
        >
      </view>
      <view class="content">
        <view class="discussion" v-if="tabFlag === 0">
          <UserDiscussion
            v-for="(item, index) in userDiscussion"
            :key="index"
            :discussionDetail="item"
          />
          <EmptyBox v-if="!userDiscussion.length" />
        </view>
        <view class="team" v-else>
          <UserTeam
            v-for="(item, index) in userTeam"
            :key="index"
            :teamDetail="item"
          />
          <EmptyBox v-if="!userTeam.length" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UserDiscussion from "./components/UserDiscussion.vue";
import UserTeam from "./components/UserTeam.vue";
import EmptyBox from "../../components/public/EmptyBox.vue";
import { UserMessage } from "../../utils/messageController.js";
import { mapState } from "vuex";
export default {
  components: {
    UserDiscussion,
    UserTeam,
    EmptyBox,
  },
  data() {
    return {
      userDetail: {},
      optionsList: [
        {
          name: "关注",
          count: 0,
        },
        {
          name: "粉丝",
          count: 0,
        },
        {
          name: "获赞",
          count: 0,
        },
      ],
      tabFlag: 0,
      focusContent: ["关注", "已关注"],
      isFocus: 0,
      btnLoading: false,
    };
  },
  onLoad(options) {
    this.userDetail = JSON.parse(decodeURIComponent(options.userDetail));
    this.isFocus = this.userDetail.fans.includes(this.userInfo._openid) ? 1 : 0;
    this.initData();
    this.getUserDiscussion();
    this.getUserTeam();
  },
  computed: {
    ...mapState(["userDiscussion", "userTeam", "userInfo"]),
    isMe() {
      return this.userDetail._openid != this.userInfo._openid;
    },
  },
  beforeDestroy() {
    this.$store.commit("clearUserDiscussion");
    this.$store.commit("clearUserTeam");
  },
  methods: {
    initData() {
      this.optionsList[0].count = this.userDetail.focusList.length;
      this.optionsList[1].count = this.userDetail.fans.length;
      this.optionsList[2].count = this.userDetail.liked;
    },

    // 获取讨论列表
    async getUserDiscussion() {
      const type = "myDiscussion";
      if (this.userDiscussion.length !== this.userDetail.discussion.length) {
        for (let i = 0; i < this.userDetail.discussion.length; i++) {
          const discussionId = this.userDetail.discussion[i];
          await this.$store.dispatch("getOneUserDiscussion", {
            discussionId,
            type,
          });
        }
      }
    },

    // 获取队伍列表
    async getUserTeam() {
      const type = "myTeam";
      if (this.userTeam.length !== this.userDetail.myTeam.length) {
        for (let i = 0; i < this.userDetail.myTeam.length; i++) {
          const teamId = this.userDetail.myTeam[i];
          await this.$store.dispatch("getOneUserTeam", {
            teamId,
            type,
          });
        }
      }
    },

    // 关注/取关
    async handleFocusUser() {
      this.btnLoading = true;
      const focusId = this.userDetail._openid,
        isFocus = this.isFocus ? false : true,
        text = isFocus ? "关注成功" : "取消关注成功";
      if (focusId === this.userInfo._openid) {
        uni.showToast({
          icon: "success",
          title: "不能关注自己",
        });
        return;
      }
      try {
        await this.$store.dispatch("focusUser", { focusId, isFocus });
        this.isFocus = this.isFocus ? 0 : 1;
        this.handleSendMessage(this.isFocus);
        uni.showToast({
          title: text,
          icon: "success",
        });
      } catch (err) {
        console.log("关注/取关失败：", err);
      }
      this.btnLoading = false;
    },

    // 发布关注/取消关注的消息
    async handleSendMessage(isFocus) {
      const receiveId = this.userDetail._openid,
        focusName = this.userInfo.nickName,
        messageItem =
          isFocus === 1
            ? new UserMessage().messageForFocus({ receiveId, focusName })
            : new UserMessage().messageForCancelFocus({ receiveId, focusName });
      console.log("check:", messageItem);
      await this.$store.dispatch("m_message/sendMessage", messageItem);
    },
  },
};
</script>

<style lang="scss">
.UserInfo {
  width: 100vw;
  .bg {
    width: 100%;
    height: 450rpx;
    .avatarBg {
      width: 100%;
      height: 100%;
      filter: blur(5rpx);
    }
  }

  .infoDetail {
    background-color: #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    .head {
      position: relative;
      width: 100%;
      height: 100rpx;
      .avatarBox {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -60rpx;
        left: 40rpx;
        width: 170rpx;
        height: 170rpx;
        border-radius: 50%;
        overflow: hidden;
        background-color: #fff;
        .avatar {
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
        }
      }
      .focusBtn {
        position: absolute;
        top: 40rpx;
        right: 20rpx;
      }
    }

    .otherInfo {
      padding: 20rpx 40rpx;
      .nickName {
        font-weight: 500;
        font-size: 40rpx;
      }
      .infoOptions {
        display: flex;
        margin-top: 20rpx;
        .optionItem {
          display: flex;
          align-items: center;
          margin-right: 20rpx;
          color: #999;
          .countStyle {
            display: inline-block;
            margin-left: 10rpx;
            margin-top: 10rpx;
            font-weight: 700;
            color: #05a47d;
            font-size: 36rpx;
          }
        }
      }
    }
  }

  .dicussionAndTeam {
    width: 100%;
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .changeTab {
      padding: 5rpx;
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 80%;
      background-color: #9cf8e1;
      .tabItem {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10rpx 0;
        width: 50%;
        height: 100%;
        color: #aaa;
      }
      .tabActive {
        background-color: #fff;
        color: #000;
      }
    }
    .content {
      width: 80%;
      margin-top: 40rpx;
    }
  }
}
</style>
